<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model使用</title>
</head>
<body>
<div id="app">
    <span v-text="text_model"></span>
    <br>
    <input type="text" v-model="text_model_instance" placeholder="edit me">
    <br>
    <textarea v-model="text_model_instance" placeholder="add multiple lines"></textarea>

    <p>{{text_model_instance}}</p>

    <span v-text="checkbox_model"></span>
    <br>
    <input type="checkbox" v-model="checkbox_model_value" value="click me">click me
    <lable for="checkbox_model_value">{{checkbox_model_value}}</lable>

    <br>
    <br>

    <input type="checkbox" id="jack" value="Jack" v-model="checkbox_model_list">
    <label>Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkbox_model_list">
    <label>John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkbox_model_list">
    <label>Mike</label>
    <br>
    <span>Checked names: {{ checkbox_model_list }}</span>

    <br> <br>

    <span v-text="radio_model"></span>
    <br>
    <input type="radio" value="One" v-model="radio_model_value">
    <label>One</label>
    <br>
    <input type="radio" value="Two" v-model="radio_model_value">
    <label>Two</label>
    <br>
    <span>Picked: {{ radio_model_value }}</span>

    <br><br>
    <span v-text="select_model"></span>
    <br>
    <select v-model="selected_model">
        <option disabled value="" selected>请选择</option>
        <option v-for="t in selelct_model_list" :value="t.value">
            {{t.key}}
        </option>

    </select>
    <span v-text="selected_model"></span>


    <br>
    <br>
    <input
            type="checkbox"
            v-model="toggle"
            v-bind:true-value="a"
            v-bind:false-value="b"
    >//绑定true值和false值
    <span v-text="toggle"></span>

    <br>
    <br>
    <input v-model.lazy="msg" >
    <span v-text="msg"></span>

    <input v-model.trim="msg">
</div>
<script src="../modules/vue.min.js"></script>
<script>

    let appdata = {
        text_model: '文本',
        text_model_instance: '',
        checkbox_model: '复选框',
        checkbox_model_value: '',
        checkbox_model_list: [],
        radio_model: '单选按钮',
        radio_model_value: '',
        select_model: 'v-for绑定下拉框',
        selelct_model_list: [
            {key: 'One', value: 'A'},
            {key: 'Two', value: 'B'},
            {key: 'Three', value: 'C'},
        ],
        selected_model: 'A',
        toggle: 'aaaaaa',
        a: 'aaaaaa',
        b: 'bbbbbb',
        msg:''
    }

    let vm = new Vue({
        el: '#app',
        data: appdata
    })
</script>
</body>
</html>